import 'package:bike_ride/common/util/hysize_fit.dart';
import 'package:bike_ride/res/style/color_styles.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

/// 头像
class Avatar extends StatelessWidget {
  final String? url;
  final String? defaultPath;
  final String? bottomText;
  final Function() onTap;

  const Avatar({Key? key, this.url, this.bottomText,required this.onTap, this.defaultPath})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final mH = 90.rpx;
    final placeholder = Image(
        image: AssetImage(
            defaultPath??"assets/common_v2/default_avatar_v2.png"), //头像占位图，加载过程中显示
        width: mH,
        height: mH);
    return GestureDetector(
      onTap: onTap,
      child: SizedBox(
        height: mH + (bottomText == null?0.rpx:20.rpx),
        width: mH,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: ClipOval(
                child: Container(
                  width: mH,
                  height: mH,
                  color: ColorStyles.color_E5E5E5,
                  child: Stack(
                    children: [
                      Center(
                        child: ClipOval(
                          child: CachedNetworkImage(
                            imageUrl: url??'',
                            width: mH - 10.rpx,
                            height: mH - 10.rpx,
                            fit: BoxFit.fill,
                            placeholder: (context, url) => placeholder,
                            errorWidget: (context, url, error) => placeholder,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            if(bottomText != null)
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    padding: EdgeInsets.symmetric(
                      horizontal: 5.rpx
                    ),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15.rpx),
                    ),
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            bottomText!,
                            style: TextStyle(
                              fontSize: 24.rpx,
                              color: Theme.of(context).colorScheme.primary,
                            ),
                          )
                        ]),
                  ))
          ],
        ),
      ),
    );
  }
}
